<template>
  <div class="search_box">
    <div class="search_header">
      <!-- <div class="login_btn">
        <p @click="getLogin" v-if="!userName">登录</p>
        <p v-if="userName">
          当前用户：
          <span>{{userName}}</span>
        </p>
        <p class="goout" v-if="userName" @click="loginOut">退出</p>
        <p class="gohome">回到主页</p>
      </div> -->
    </div>
    <div class="search_contain">
      <div class="logo">
        <div class="logo_img">
          <img src="./images/logo.png" alt />
        </div>
        <p>搜数</p>
      </div>
      <div class="search_input">
        <el-input
          id="searchInput"
          v-model="hotKey"
          placeholder="请输入内容"
          @keyup.enter.native="getSearchData"
        ></el-input>
        <el-button
          id="searchBtn"
          type="primary"
          icon="el-icon-search"
          @click="getSearchData"
          @keyup.enter.native="getSearchData"
        ></el-button>
        <div class="search_hot" v-show="searchHotStatus">
          <p
            v-for="(item,index) in searchWordList"
            @click="getCheckWord(item)"
            :key="index"
          >{{item.title}}</p>
        </div>
        <div class="hot_word">
          <el-row>
            <el-col :span="3">
              <span>热门搜索:</span>
            </el-col>
            <el-col :span="21" style="overflow:hidden;height:20px;">
              <span v-for="(item,index) in hotWordList" :key="index" v-if="index <= 5" @click="getHotData(item)">{{item.title}}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <p class="search_footer"></p>
  </div>
</template>

<script>
//  import 'static/config/app-config.js';
/* eslint-disable linebreak-style,semi,linebreak-style,linebreak-style */
import * as searchAPI from "@/pages/search/api/search.js";
export default {
  data() {
    return {
      hotKey: "",
      hotWordList: [],
      userName: "",
      searchWordList:[],
      searchHotStatus:false
    };
  },
  mounted() {
    this.getHotWord();
  },
  created() {
    let user = JSON.parse(JSON.parse(localStorage.getItem("userInfo")).data)
      .sysUser.username;
    this.userName = user;
  },
  watch: {
    hotKey(now, old) {
      this.hotKeyChange(now);
    }
  },
  methods: {
    hotKeyChange(now){
      if (!now||now=="") {
        this.searchWordList=[];
        this.searchHotStatus = false;
      } else {
        let req = {
          keyword: now,
          mitmid: -1
        };
        searchAPI
          .getTips(req)
          .then(res => {
            if (res.message == "success" && res.data.length) {
              if(this.hotKey){
                this.searchWordList = res.data;
                this.searchHotStatus = true;
              }else{
                this.searchWordList=[];
                this.searchHotStatus = false;
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    getHotWord() {
      searchAPI
        .getHotWord()
        .then(res => {
          if (res.message == "success" && res.data.length) {
            this.hotWordList = res.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getSearchData() {
      if(this.hotKey!=""){
        this.$router.push("/search" + this.hotKey);
      }else{
        this.$message({
            type: "warning",
            message: "请先输入信息后查询"
          });
      }
    },
    getHotData(word){
      this.hotKey = word.title;
      this.getSearchData()
    },
    getCheckWord(word) {
      this.hotKey = word.title;
      document.getElementById("searchInput").focus();
    },
    loginOut() {
      this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass:"loginOutConfirm"
      })
        .then(() => {
          setTimeout(() => {
            this.$message({
              message: "成功退出",
              type: "success"
            });
            // this.$router.push("/login");
            top.location = loginPageUrl;
            localStorage.clear();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getLogin() {
      this.$router.push("/login");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./../../../assets/css/rule.scss";
.search_box{
  background: url('images/bg.png' ) no-repeat;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.search_header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px 0;
  .login_btn {
    display: flex;
    align-items: center;
  }
  p {
    margin: 0 10px;
    cursor: pointer;
    color:$fontColorLimit;
    font-size: $fontSize;
  }
  p.goout:hover,p.gohome:hover{
    color:$fontColorActive;
  }
}
.search_contain {
  width: 1000px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo {
  display: flex;
  align-items: flex-end;
  .logo_img {
    width: 60px;
    height: 60px;
    margin-top: 140px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 80%;
    }
  }
  p {
    color: $fontColorW;
    font-family:Microsoft YaHei;
    font-weight:400;
    font-size: 1.8rem;
    line-height: 3.2;
    float: left;
    margin-left: 5px;
  }
}
.search_input {
  width: 640px;
  position: relative;
  #searchBtn {
    top: 0;
    position: absolute;
    right: 0;
    width: 100px;
  }
  #searchInput {
    box-sizing: border-box;
    padding-right: 80px;
  }
  margin-top: 40px;
  .el-input__inner{
    background:rgba(29,156,183,0.25);
    border:1px solid rgba(29,156,183,1);
  }
}
.search_footer {
  font-size: 12px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 40px 0;
  color:$fontColorLimit;
}
.search_hot {
  position: absolute;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background:rgba(2,112,139,1);
  top: 45px;
  box-shadow: 0px 0px 27px -16px;
  z-index: 999;
  border-radius: 2px;
  p {
    box-sizing: border-box;
    padding: 5px;
    cursor: pointer;
    color:$fontColorLimit;
  }
}
.hot_word{
    margin-top: 30px;
    color: #FFFFFF;
    font-size: 14px;
    .el-col-3{
      color:#1d9cb7;
    }
    .el-col-21{
      overflow: hidden;
      span{
        margin-right:20px;
        cursor: pointer;
      }
      span:hover{
        color:rgba(255, 255, 255, 0.8);
      }
    }
}
.search_hot p:hover {
  background:rgba(0,85,109,1);
}
</style>
<style lang="scss" >
@import "./../../../assets/css/rule.scss";
.search_box{
  .search_contain{
    #searchInput{
      background:rgba(29,156,183,0.25);
      border:1px solid rgba(29,156,183,0.25);
      color:$fontColorLimit;
    }
    #searchBtn{
      background:rgba(29,156,183,1);
      border-radius:0px 2px 2px 0px;
      border:1px solid rgba(29,156,183,1);
    }
  }
}
.loginOutConfirm{
  .el-message-box__btns{
    .el-button:focus, .el-button:hover{
      color: $fontColorActive;
      border-color: rgba(29,156,183,0.2);
      background-color: #ecf5ff;
    }
    .el-button--primary,.el-button--primary:focus, .el-button--primary:hover{
      background:$fontColorActive;
      border:1px solid $fontColorActive;
      color: $fontColorW;
    }
  }
}
</style>
